<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jq-1.12.4.js"></script>
</head>

<body>
    <section>
        <span>X</span>
        <h1>常见问题</h1>
        <div class="proList"></div>
        <div class="img"><img src="" alt=""></div>
    </section>
</body>
<script>
    let str = `<ul>
      <li> 买了商品后， 查不到物流信息怎么办？ </li> 
      <li> 申请退款后， 交易退款成功， 钱到哪里？ </li> 
      <li> 卖家拒绝退款， 怎么办？ </li> 
      <li>投诉发生的时间和条件是什么？ </li> 
      <li> 如何申请淘宝客服介入？ </li> 
      </ul>`

    $(function () {
        //1、text()  不能解析html标签，覆盖代码 和innerTEXT相同
        // $("h1").click(function() {
        //   $(".proList").text(str)
        // })
        // $("span").click(function() {
        //   $(".proList").text("")
        // })


        //2、html() 能解析html标签，覆盖代码 innderHTML相同
        $("h1").click(function () {
            $(".proList").html(str)
        })
        $("span").click(function () {
            $(".proList").html("")
        })

        $(".img").click(function () {
            //获得$(".proList")的html内容
            let st = $(".proList").html()
            console.log(st)
        })
    })
</script>

</html>